<template>
    <div class="menuInfo">
        <div class="menuHeader">
            <Row>
                <Col :xs="24" :sm="6" :md="3" :lg="2">
                <div class="menuTop">
                    <Button type="primary" class="menuStatus" @click="showAddForms = true"><i class="ivu-icon ivu-icon-plus menuIonic"></i>新增菜单</Button>
                    <!--<Button type="warning" @click="showEdit('')"><i class="ivu-icon ivu-icon-edit menuIonic"></i>编辑</Button>-->
                </div>
                </Col>
                <Col :xs="12" :sm="7" :md="7" :lg="3">
                <div class="menuList">
                    <Select v-model="model1" placeholder="请选择系统名称" >
                        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </div>
                </Col>
                <Col :xs="12" :sm="9" :md="7" :lg="10">
                <div class="menuSearch">
                    <Button type="success" icon="ios-search">搜索</Button>
                </div>
                </Col>
            </Row>
        </div>

        <div class="menuContent">
        
        <table border="1" cellpadding="0" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>系统名称</th>
                    <th>菜单名称</th>
                    <th>菜单编号</th>
                    <th>菜单级别</th>
                    <th>菜单图标</th>
                    <th>链接地址</th>
                    <th>菜单描述</th>
                    <th>操作</th>
                     
                </tr>
            </thead>
            <tbody>
                <template v-for="(menu,index) in filterData">
                    <tr>
                        <td @click="toggleMenu(menu.menuId)"><Icon type="android-folder" class='ionic_distance'></Icon>{{menu.systemName}}</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>系统名称</td>
                        <td><button type="button" class="ivu-btn ivu-btn-warning ivu-btn-small" @click="editMenu(index)"> <span>编辑</span></button></td>
                    </tr>
                    <template  v-for="(subM,subIndex) in menu.menuList">
                        <tr>
                            <td></td>
                            <td @click="toggleMenu(subM.menuId)"><Icon type="android-folder" class='ionic_distance'></Icon>{{subM.menuName}}</td>
                            <td>{{subM.menuNo}}</td>
                            <td>{{subM.menuLevel}}</td>
                            <td>{{subM.menuIcon}}</td>
                            <td>{{subM.menuUrl}}</td>
                            <td>{{subM.menuDiscribtion}}</td>
                            <td><button type="button" class="ivu-btn ivu-btn-warning ivu-btn-small" @click="editMenu(index)"> <span>编辑</span></button></td>
                        </tr>
                        <template v-for="subM2 in subM.menuList">
                            <tr>
                                <td>{{subM2.systemName}}</td>
                                <td>{{subM2.menuName}}</td>
                                <td>{{subM2.menuNo}}</td>
                                <td>{{subM2.menuLevel}}</td>
                                <td>{{subM2.menuIcon}}</td>
                                <td>{{subM2.menuUrl}}</td>
                                <td>{{subM2.menuDiscribtion}}</td>
                                <td><button type="button" class="ivu-btn ivu-btn-warning ivu-btn-small" @click="editMenu(index)"> <span>编辑</span></button></td>
                            </tr>
                        </template>
                    </template>
                </template>
            </tbody>
        </table>
        </div>


<!--         <div class="menuContent">
            <div class="menuMain">
                <Row>
                    <Col span="24">
                    <Table border ref="selection" :columns="columns4"  @on-select="onSelect" @on-selection-change="selectInfo" :data="data1"></Table>
                    </Col>
                </Row>

            </div>
        </div> -->
        <!--分页-->
        <div class="sysPage">
            <Page :total="100" show-sizer></Page>
        </div>

        <!--//弹框-->
        <addMenu  :showAddForm="showAddForms" @reset="cancelModal"></addMenu>
        <editMenu :showEditForm="showEditForms" :data="rowDataInfo[0]" @reset="cancelModal"></editMenu>
<!--         <div v-for="menu in menuList">
            <div>{{menu.menuName}}</div>
            <template v-for="subM in menu.menuList">
                <Row class="indent">
                    <Col span="3">{{subM.menuName}}</Col>
                    <Col span="3">{{subM.menuNo}}</Col>
                    <Col span="3">{{subM.menuLevel}}</Col>
                    <Col span="3">{{subM.menuIcon}}</Col>
                    <Col span="3">{{subM.menuUrl}}</Col>
                    <Col span="3">{{subM.menuDiscribtion}}</Col>
                    <Col span="3" >{{subM.btns}}</Col>
                    <template v-for="subM2 in subM.menuList">
                        <Row class="indent">
                            <Col span="24">{{subM2.menuName}}</Col>
                        </Row>
                    </template>
                </Row>
            </template>
        </div> -->
    </div>
</template>

<script>
    import util from '../../libs/util'
    import addMenu from '../../modal/menu/addMenu.vue'
    import editMenu from '../../modal/menu/editMenu.vue'
    export default {
        name: '',
        data () {
            return {
                showAddForms:false,
                showEditForms:false,
                filterData:[{
                    systemName: "租管",
                    menuName: '',
                    menuNo: '0',
                    menuLevel: '一级菜单',
                    menuIcon: '12321',
                    menuUrl: '4444',
                    menuDiscribtion: '777',
                    menuId:"123445",
                    menuList: [{
                        systemName: '',
                        menuName: "房源管理",
                        menuNo: '0',
                        menuLevel: '一级菜单',
                        menuIcon: '12321',
                        menuUrl: '4444',
                        menuId:"12344544",
                        menuDiscribtion: '777',
                        menuList: [
                            {
                                systemName: '',
                                menuName: "房源列表",
                                menuNo: '0',
                                menuLevel: '一级菜单',
                                menuIcon: '12321',
                                menuUrl: '4444',
                                menuId:"123433345",
                                menuDiscribtion: '777'
                            },
                            {
                                systemName: '',
                                menuName: "金融列表",
                                menuNo: '0',
                                menuLevel: '一级菜单',
                                menuIcon: '12321',
                                menuUrl: '4444',
                                menuId:"123448335",
                                menuDiscribtion: '777'
                            }
                        ]
                    },{
                        systemName: '',
                        menuName: "合同管理",
                        menuNo: '0',
                        menuLevel: '一级菜单',
                        menuIcon: '12321',
                        menuUrl: '4444',
                        menuDiscribtion: '777',
                        menuId:"12344115",//haha  没有看出来呀
                        menuList: [
                            {
                                systemName: '',
                                menuName: "合同列表",
                                menuNo: '0',
                                menuLevel: '一级菜单',
                                menuIcon: '12321',
                                menuUrl: '4444',
                                menuId:"123444445",
                                menuDiscribtion: '777'
                            },
                            {
                                systemName: '',
                                menuName: "日期列表",
                                menuNo: '0',
                                menuLevel: '一级菜单',
                                menuIcon: '12321',
                                menuUrl: '4444',
                                menuId:"123445908",
                                menuDiscribtion: '777'
                            }
                        ]
                    }
                    ]
                }],
                rowDataInfo:[],
                menuList:[{
                    systemName: "租管",
                    menuName: '',
                    menuNo: '0',
                    menuLevel: '一级菜单',
                    menuIcon: '12321',
                    menuUrl: '4444',
                    menuDiscribtion: '777',
                    menuId:"123445",
                    menuList: [{
                        systemName: '',
                        menuName: "房源管理",
                        menuNo: '0',
                        menuLevel: '一级菜单',
                        menuIcon: '12321',
                        menuUrl: '4444',
                        menuId:"12344544",
                        menuDiscribtion: '777',
                        menuList: [
                            {
                                systemName: '',
                                menuName: "房源列表",
                                menuNo: '0',
                                menuLevel: '一级菜单',
                                menuIcon: '12321',
                                menuUrl: '4444',
                                menuId:"123433345",
                                menuDiscribtion: '777'
                            },
                            {
                                systemName: '',
                                menuName: "金融列表",
                                menuNo: '0',
                                menuLevel: '一级菜单',
                                menuIcon: '12321',
                                menuUrl: '4444',
                                menuId:"123448335",
                                menuDiscribtion: '777'
                            }
                        ]
                    },{
                        systemName: '',
                        menuName: "合同管理",
                        menuNo: '0',
                        menuLevel: '一级菜单',
                        menuIcon: '12321',
                        menuUrl: '4444',
                        menuDiscribtion: '777',
                        menuId:"12344115",
                        menuList: [
                            {
                                systemName: '',
                                menuName: "合同列表",
                                menuNo: '0',
                                menuLevel: '一级菜单',
                                menuIcon: '12321',
                                menuUrl: '4444',
                                menuId:"123444445",
                                menuDiscribtion: '777'
                            },
                            {
                                systemName: '',
                                menuName: "日期列表",
                                menuNo: '0',
                                menuLevel: '一级菜单',
                                menuIcon: '12321',
                                menuUrl: '4444',
                                menuId:"123445908",
                                menuDiscribtion: '777'
                            }
                        ]
                    }
                    ]
                }],
                cityList: [
                    {
                        value: 'beijing',
                        label: '北京市'
                    },
                    {
                        value: 'shanghai',
                        label: '上海市'
                    },
                    {
                        value: 'shenzhen',
                        label: '深圳市'
                    },
                    {
                        value: 'hangzhou',
                        label: '杭州市'
                    },
                    {
                        value: 'nanjing',
                        label: '南京市'
                    },
                    {
                        value: 'chongqing',
                        label: '重庆市'
                    }
                ],
                model1: '',
                columns4: [
                    {
                        title: '系统名称',
                        key: 'menuSysName',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'android-folder'
                                    },
                                    style: {
                                        marginRight: '10px'
                                    }
                                }),
                                h('small', params.row.menuSysName)
                            ]);
                        }
                    },
                    {
                        title: '菜单名称',
                        key: 'menuName'
                    },
                    {
                        title: '菜单编号',
                        key: 'menuNumber'
                    },
                    {
                        title: '菜单级别',
                        key: 'menuLevel'
                    },
                    {
                        title: '菜单图标',
                        key: 'menuIonic'
                    },
                    {
                        title: '链接地址',
                        key: 'menuUrl'
                    },
                    {
                        title: '菜单描述',
                        key: 'menuDescribe'
                    },
                    {
                        title: '操作',
                        key: 'menuOperate'
                    }
                ],
                data1: [
                    {
                        menuSysName: '结算',
                        menuName: '运营平台',
                        menuNumber: '01',
                        menuLevel:'一级菜单',
                        menuIonic:'',
                        menuUrl:'',
                        menuDescribe:'',
                        menuOperate:'编辑'

                    },
                    {
                        menuSysName: '金融',
                        menuName: '运营平台',
                        menuNumber: '01',
                        menuLevel:'一级菜单',
                        menuIonic:'',
                        menuUrl:'',
                        menuDescribe:'',
                        menuOperate:'编辑'

                    },
                    {
                        menuSysName: '通用',
                        menuName: '运营平台',
                        menuNumber: '01',
                        menuLevel:'一级菜单',
                        menuIonic:'',
                        menuUrl:'',
                        menuDescribe:'',
                        menuOperate:'编辑'

                    },
                    {
                        menuSysName: '通用',
                        menuName: '运营平台',
                        menuNumber: '01',
                        menuLevel:'一级菜单',
                        menuIonic:'',
                        menuUrl:'',
                        menuDescribe:'',
                        menuOperate:'编辑'

                    },
                    {
                        menuSysName: '通用',
                        menuName: '运营平台',
                        menuNumber: '01',
                        menuLevel:'一级菜单',
                        menuIonic:'',
                        menuUrl:'',
                        menuDescribe:'',
                        menuOperate:'编辑'

                    }
                ]
            }
        },
        components: {
            addMenu,
            editMenu
        },
        methods: {
            onSelect(selection,row) {
//                console.log(selection)
//                console.log(row)

            },
            selectInfo(selection) {
                this.rowDataInfo = selection
            },
            handleSelectAll (status) {
                this.$refs.selection.selectAll(status);
            },
            cancelModal() {
                this.showAddForms = false
                this.showEditForms = false
            },
            editMenu(index){
//                this.$refs.selection.selectAll(false); // 取消所有项并且清空其绑定的数据
                this.showEditForms = true
//                this.rowDataInfo.push(params.row);
            },
            toggleMenu(id){
                // 筛选数据,传过来的唯一菜单id
                let key=0
                for(let item of this.menuList){
                    /*多层结构，深度遍历*/
                    if(item.menuId==id){
                        if(this.filterData[key].menuList.length>0){
                            /*清空下级，折叠效果*/
                            this.filterData[key].menuList=[]
                        }else {
                            console.log("哈哈哈")
                            this.filterData[key].menuList=this.menuList[key].menuList
                        }
                    }else {
                        /*第一层没有，去第二层找*/
                        let subkey=0
                        for(let subItem of item.menuList){
                            if(subItem.menuId==id){
                                /*找到了*/
                                if(this.filterData[key].menuList[subkey].menuList.length>0){
                                    /*清空下级*/
                                    this.filterData[key].menuList[subkey].menuList=[]
                                }
                            }else{
                                this.filterData[key].menuList[subkey]=this.menuList[key].menuList[subkey]
                            }
                            subkey+=1
                        }
                    }
                    key+=1
                }
                console.log(this.menuList)
            }
        }
    }
</script>


<style scoped>
    .menuHeader{
        margin-bottom: 15px;
        margin-top: 5px;
    }
    .menuStatus{
        margin-right: 20px;
    }
    .menuIonic{
        padding-right:5px;
    }
    .menuSearch{
        margin-left: 10px;
    }
    .sysPage{
        padding: 20px 0;
        text-align: right;
    }
    .indent {
        margin-left:15px;
    }

    /*//table*/
    .menuContent{
        text-align: center;
    }
    .ionic_distance{
        margin: 0 10px

    }
    tr{
        height: 48px;
         border: 1px solid #e9eaec;
    }
    td {
            border-right: 1px solid #e9eaec;
    }
</style>
